<template>
	<view class="container">
		<view class="top-view">
			<classes-view @change="classChange" :hasChildren="true"/>
			<!-- <date-select-view @change="dateChange"></date-select-view> -->
		</view>
		
		<scroll-view class="content-view" scroll-y="true">
			<u-grid :col="3" :border="false">
				<u-grid-item v-for="(item,index) in childrenList" @click="itemClick(item, index)">
					<children-info-view :name="item.name" :imgUrl="item.imgUrl"
						:gender="item.gender">
					</children-info-view>
				</u-grid-item>
			</u-grid>
		</scroll-view>
	</view>
</template>

<script>
	import ClassesView from '@/components/classes-view.vue'
	// import DateSelectView from '@/components/date-select-view.vue'
	import ChildrenInfoView from '@/components/children-info-view.vue'
	export default {
		components: {
			ClassesView,
			// DateSelectView,
			ChildrenInfoView,
		},
		data() {
			return {
				childrenList: [],
			}
		},
		onLoad() {
		},
		methods: {
			classChange(res) {
				console.log(res);
				this.childrenList = res.childrenList;
			},
			
			itemClick(item, index) {
				uni.navigateTo({
					url: `/pages_evaluate/physicle/evaluate-list?childrenId=${item.id}`,
				})
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: $app-page-bg-color;
	}
	.container{
		padding-left: 30rpx;
		padding-right: 30rpx;
		display: flex;
		flex-direction: column;
		align-items: center;

		.top-view{
			width: 100%;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
		}
		
		> .content-view{
			margin-top: 23rpx;
			margin-bottom: 30rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			overflow: scroll;
		}
		
		.action-view{
			position: fixed;
			bottom: 0;
			margin-bottom: 60rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
</style>
